<template>
	<!-- 通用版本 -->
	<view>
		<view class="container">
			<!-- 下拉框 -->
			<view class="select">
				<zy-select :placeholder="$t('my.procedure.code')" :selectList="selectList" :zy_customSelect="zy_customSelect" @selectHandler="selectHandler"
					:disabled="false" :rightBtn="$t('my.procedure.search')" @rightBtnHandler="searchList"
					@clear="clearHandler" @lineHandler="lineHandler" clearable>
				</zy-select>
			</view>
			<!-- 下拉框 -->
			<view class="select">
				<zy-select :placeholder="$t('homepage.FabricReport.remarks')" :selectList="[]"
					:disabled="false" :rightBtn="$t('my.procedure.search')" @rightBtnHandler="searchHandle"
					@clear="clearHandlerSec" :rightIcon="''" clearable>
				</zy-select>
			</view>
			<!-- 添加工序表格 -->
			<zy-table :selectedType="selectedType" :headList="headList" :dataList="dataList" checkbox
				@handleSelectionChange="handleSelectionChange" border loading>
			</zy-table>
		</view>
		<!-- 底部按钮固定 -->
		<bottomBtn class="bottomBtn" fixed :leftText="$t('public.reset')" :rightText="$t('my.procedure.add')"
			@rightBtn="submitBtn" @leftBtn="resetBtn">
		</bottomBtn>
	</view>
</template>
<script>
	import {
		queryDictByType,
		queryList,
		addProcedure
	} from "@/api/index.js"
	import bottomBtn from "@/components/bottomBtn/index.vue"
	export default {
		components: {
			bottomBtn
		},
		data() {
			return {
				selectList: [], //下拉框数据数组
				zy_customSelect: {
					borderRadius: "50rpx",
					border: "5rpx solid #409EFF",
				}, //下拉框自定义样式
				columnData: "", //下拉框被选择值
				//表格表头数据
				headList: [
					{
						name: this.$t('my.procedure.code'),
						key: 'code'
					},
					{
						name: this.$t('public.name'),
						key: 'name'
					},
					{
						name: this.$t('public.part'),
						key: 'partName'
					},
					{
						name: this.$t('homepage.FabricReport.remarks'),
						key: 'remarks'
					},
				],
				dataList: [], //表格数据
				selectedType: '', //父组件传值子组件，置空全选框
				selectedId: [], //表格多选框数组
				team: '', //默认下拉框选择数据
				codeVal: '',
				commentVal: ''
			}
		},
		created() {
			this.searchList()
		},
		methods: {
			//获取弹框数据
			selectHandler() {
				this.selectList = []
				queryDictByType({
					type: "procedure_team",
				}).then((res) => {
					if (res.code == 0) {
						for (var i = 0; i < res.data.length; i++) {
							let obj = {}
							obj.label = res.data[i].label
							obj.value = res.data[i].value
							// 下拉框数组数据
							this.selectList.push(obj)
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 3000
						})
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 3000
					})
				});
			},
			//下拉框点击行事件
			lineHandler(val) {
				this.columnData = val.value
				this.searchList()
			},
			// 搜索框清除事件
			clearHandler() {
				this.columnData = ""
				this.searchList()
			},
			clearHandlerSec() {
				this.columnData = ""
				this.searchHandle()
			},
			//搜索下拉框内容查询
			searchList(e) {
				if (this.columnData == '') {
					this.team = "1"
				} else {
					this.team = this.columnData
				}
				let data = {}
				if (e == "" || e == undefined) {
					if (this.commentVal) {
						data = {
							team: this.team,
							code: "",
							remarks: this.commentVal
						}
					} else {
						data = {
							team: this.team,
							code: "",
						}
					}
					
					this.codeVal = ""
				} else {
					if (this.commentVal) {
						data = {
							team: "",
							code: e,
							remarks: this.commentVal
						}
					} else {
						data = {
							team: "",
							code: e,
						}
					}
					
					this.codeVal = e
				}
				
				this.dataList = []
				queryList(data).then((res) => {
					if (res.code == 0) {
						this.dataList = res.data
					} else {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 3000
						})
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 3000
					})
				});
			},
			searchHandle(e) {
				if (this.columnData == '') {
					this.team = "1"
				} else {
					this.team = this.columnData
				}
				
				let data = {}
				if (e == "" || e == undefined) {
					data = {
						team: this.team,
						code: "",
					}
					
					this.commentVal = ''
				} else {
					data = {
						team: "",
						code: this.codeVal,
						remarks: e
					}
					
					this.commentVal = e
				}
				
				this.dataList = []
				queryList(data).then((res) => {
					if (res.code == 0) {
						this.dataList = res.data
					} else {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 3000
						})
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 3000
					})
				});
			},
			// 点击多选框
			handleSelectionChange(e) {
				this.selectedId = []
				e.value.forEach((item) => {
					this.selectedId.push(item.id)
				})
			},
			//重置按钮
			resetBtn() {
				uni.redirectTo({
					url: "/pages/My/procedure/index"
				})
			},
			//提交按钮
			submitBtn: function() {
				this.selectedType = ''
				if (this.selectedId.length == 0) {
					uni.showToast({
						title: this.$t('my.procedure.pleaseSelectProcedure'),
						icon: "none",
						duration: 3000
					})
				} else if (this.selectedId.length > 50) {
					uni.showToast({
						title: this.$t('my.procedure.pleaseSelectProcedure'),
						icon: "none",
						duration: 3000
					})
				} else {
					addProcedure({
						foreignId: this.$store.state.loginData.id, //人员id
						type: 0,
						procedureId: this.selectedId
					}).then((res) => {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 3000
						})
						this.selectedType = '0'
					}).catch((res) => {
						uni.showToast({
							title: res.message,
							icon: "none",
							duration: 3000
						})
					});
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.select {
		margin: 0 0 20rpx 0;
	}
</style>